<template>
  <el-dialog style="margin-top:-12vh" :title="title" :before-close="dialogClose" :visible.sync="dialogVisible"
    width="70%">
    <el-form :model="roleForm" label-width="120px">
      <el-form-item v-if="operType != 3" label="角色名称">
        <el-input v-model="roleForm.name" placeholder="请输入角色名称"></el-input>
      </el-form-item>
      <el-form-item v-if="operType != 3" label="角色描述">
        <el-input type="textarea" v-model="roleForm.remark" placeholder="请输入角色描述"></el-input>
      </el-form-item>

      <!-- 权限配置表格 -->
      <el-form-item label="权限配置" :disabled="operType == 3">
        <el-table :data="permissionList" border style="width: 100%">
          <el-table-column prop="name" label="模块名称" width="180">
          </el-table-column>
          <el-table-column label="查看权限" width="100">
            <template slot-scope="scope">
              <el-switch v-model="roleForm.rolejson[scope.row.key].select"
                :disabled="roleForm.rolejson[scope.row.key].select == null || !roleForm.rolejson[scope.row.key].isShow">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="新增权限" width="100">
            <template slot-scope="scope">
              <el-switch v-model="roleForm.rolejson[scope.row.key].add"
                :disabled="roleForm.rolejson[scope.row.key].add == null || !roleForm.rolejson[scope.row.key].isShow">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="编辑权限" width="100">
            <template slot-scope="scope">
              <el-switch v-model="roleForm.rolejson[scope.row.key].update"
                :disabled="roleForm.rolejson[scope.row.key].update === undefined || !roleForm.rolejson[scope.row.key].isShow">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作权限" width="100">
            <template slot-scope="scope">
              <el-switch v-model="roleForm.rolejson[scope.row.key].oper"
                :disabled="roleForm.rolejson[scope.row.key].oper === undefined || !roleForm.rolejson[scope.row.key].isShow">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="导入权限" width="100">
            <template slot-scope="scope">
              <el-switch v-model="roleForm.rolejson[scope.row.key].upload"
                :disabled="roleForm.rolejson[scope.row.key].upload === undefined || !roleForm.rolejson[scope.row.key].isShow">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="删除权限" width="100">
            <template slot-scope="scope">
              <el-switch v-model="roleForm.rolejson[scope.row.key].delete"
                :disabled="roleForm.rolejson[scope.row.key].delete == undefined || !roleForm.rolejson[scope.row.key].isShow">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="显示菜单" width="100">
            <template slot-scope="scope">
              <el-switch v-model="roleForm.rolejson[scope.row.key].isShow">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="是否全选" width="100">
            <template slot-scope="scope">
              <el-switch @change="selectAll(scope.row.key)" v-model="roleForm.rolejson[scope.row.key].isAll">
              </el-switch>
            </template>
          </el-table-column>

        </el-table>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogClose">取 消</el-button>
      <el-button v-if="operType < 3" type="primary" @click="saveRole">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import store from '@/store';
export default {
  name: 'RoleConfig',
  data() {
    return {
      roleForm: {
        name: '',
        remark: '',
        rolejson: store.getters.roleTemplate,
      },
      permissionList: store.getters.roleTableList
    }
  },
  watch: {
    // roleData: {
    //     handler(newVal) {
    //         this.roleForm = newVal;
    //     },
    //     deep: true,  // 深度监听
    //     immediate: true  // 立即执行一次
    // }
    dialogVisible(nv) {
      console.log(nv)
      if (nv) {
        if (this.operType == 1) {
          this.initAdd();
        } else if (this.operType == 2) {
          this.initUpdate();
        } else {
          this.initLook();
        }
      }
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: ""
    },
    operType: {
      type: Number,
      default: 1  // 1新增 2编辑 3查看
    },
    title: {
      type: String,
      default: ""
    },
    roleData: {  // 编辑和查看的时候 地址会变化
      type: Object,
      default: () => { return {} }
    }
  },
  methods: {
    // 关闭
    dialogClose() {
      this.$emit("close");
      return;
    },

    initAdd() {
      this.roleForm = {
        name: '',
        remark: '',
        rolejson: this.$store.getters.roleTemplate,
      };
      this.permissionList = this.$store.getters.roleTableList;
    },
    initUpdate() {
      console.log(this.roleData, "====");
      this.roleForm = this.roleData;
      this.roleForm.rolejson = JSON.parse(this.roleForm.rolejson || JSON.stringify(this.$store.getters.roleTemplate));
    },
    initLook() {
      this.roleForm = {
        rolejson: this.roleData
      }
    },
    // 全选
    selectAll(key) {
      let arr = this.roleForm.rolejson[key];
      let flag = arr.isAll;
      for (let item in arr) {
        arr[item] = flag;
      }
    },
    // 保存角色
    saveRole() {
      if (!this.roleForm.name) {
        this.$message.warning('请输入角色名称')
        return
      }
      let roleList = {};
      roleList = JSON.parse(JSON.stringify(this.roleForm));
      roleList.rolejson = JSON.stringify(roleList.rolejson || {});
      console.log(roleList, "--roleList");
      this.$emit("submit", roleList)
      return;
    }
  }
}
</script>

<style lang="scss" scoped>
.role-container {
  padding: 20px;

  .box-card {
    max-width: 1200px;
    margin: 0 auto;
  }

  .el-table {
    margin-top: 20px;
  }

  .el-dialog {
    .el-form {
      padding: 20px;
    }
  }
}
</style>